import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import instance from '@/api'
import useCreateOrder from '@/hooks/useCreateOrder'

export interface FormState {
    customer_name: string;
    phone: string;
    spare_name: string;
    spare_phone: string;
    customer_attribute: string;
    service_type: string;
    customer_type: string;
    branch: string;
    price: string | number;
    risk_money: string | number;
    pay_status: string;
    expectTime: string;
    timeRange: string;
    address: string;
    area: string | number;
    rooms: string | number;
    livingRooms: string | number;
    bathRooms: string | number;
    other: string;
    tags: string[];
    remark: string;
}

export const useOrderForm = () => {
    const router = useRouter()
    const { numberToChinese, getRecordTime } = useCreateOrder()
    
    const form = reactive<FormState>({
        customer_name:'',
        phone:'',
        spare_name:'',
        spare_phone:'',
        customer_attribute:'',
        service_type:'',
        customer_type:'',
        branch:'',
        price:'',
        risk_money:'',
        pay_status:'',
        expectTime:'',
        timeRange:'',
        address:'',
        area:'',
        rooms:'',
        livingRooms:'',
        bathRooms:'',
        other:'',
        tags: [],
        remark:''
    })

    const rules = {
        customer_name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
        phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        spare_phone: [
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
        ],
        price: [
            { required: true, message: '请输入金额', trigger: 'blur' },
            { type: 'number' as const, message: '必须为数字' }
        ],
        customer_type:[{ required: true, message: '请选择客户属性', trigger: 'change' }],
        branch: [{ required: true, message: '请选择订单来源', trigger: 'change' }],
        pay_status: [{ required: true, message: '请选择收款状态', trigger: 'change' }],
        expectTime: [{ required: true, message: '请选择期望时间', trigger: 'change' }],
        address: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
        timeRange: [{ required: true, message: '请选择档期', trigger: 'change' }],
        service_type: [{ required: true, message: '请输入服务类型', trigger: 'change' }],
        customer_attribute: [{ required: true, message: '请输入服务类型', trigger: 'change' }],
        risk_money:[{ required: true, message: '请输入服务类型', trigger: 'change' }]
    }

    const submit = async () => {
        const room_attributes = '套内面积' + String(form.area) + '㎡/' + 
            numberToChinese(String(form.rooms)) + '室' + 
            numberToChinese(String(form.livingRooms)) + '厅' + 
            numberToChinese(String(form.bathRooms)) + '卫/特殊场所: ' + form.other
        const record_time = getRecordTime()
        const expected_time = form.expectTime + form.timeRange
        
        const submitForm = {
            ...form,
            room_attributes,
            record_time,
            expected_time
        }
        const resp = await instance.post('/api/order/createOrder', submitForm)
        const { status } = resp
        if(status === 200) {
            ElMessage.success('添加成功')
            router.push({ name:'order.default' })
            // 重置表单
            Object.keys(form).forEach(key => {
                const k = key as keyof FormState
                if (k === 'tags') {
                    form[k] = []
                } else {
                    form[k] = ''
                }
            })
        }
    }

    return {
        form,
        rules,
        submit
    }
} 